<template>
	<div v-if="ascribe">
		<uni-page-header title="归因分析" />
		<div>
			<div class="result">
				<div class="result-title">分析结果</div>
				<div class="result-content">
					{{ ascribe.name }}
				</div>
			</div>

			<div class="content">
				<div class="content-title">自测报告的分析和判断标准</div>
				<div class="content-content">
					<rich-text :nodes="ascribe.content"></rich-text>
				</div>
			</div>
			
			<div class="card" v-for="(item, index) in product_list" :key="index">
				<product-item :item="item"></product-item>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		wx_questionnaire_ascribe
	} from '@/api'
	import { getImg } from '@/utils'
	export default {
		data() {
			return {
				ascribe: null,
				product_list: []
			}
		},
		onLoad(options) {
			console.log(options)
			if (options.result_id) {
				wx_questionnaire_ascribe({
					result_id: parseInt(options.result_id)
				}).then(res => {
					this.ascribe = res.ascribe
					if (res.ascribe && res.ascribe.product_list) {
						this.product_list = res.ascribe.product_list.map(item => {
							if (item.IMAGE) {
								item.IMAGE = getImg(item.IMAGE)
							}
							return item
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.card {
		overflow: hidden;
	
		&:not(:nth-of-type(1)) {
			border: 20rpx;
		}
	
		&:nth-of-type(1) {
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
		}
	}
	
	.result {
		margin: 20rpx;

		&-title {
			height: 84rpx;
			background: #FFF36D;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			line-height: 44rpx;
			text-align: right;
			font-style: normal;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		&-content {
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			background: #fff;
		}
	}

	.content {
		margin: 20rpx;
		&-title {
			height: 84rpx;
			background: #E7E7E7;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			line-height: 44rpx;
			text-align: right;
			font-style: normal;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		&-content {
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			background: #fff;
		}
	}
</style>